<template>
  <div class="form-search" v-if="columns.length">
    <el-form ref="formRef" :model="searchParam" label-width="auto">
      <el-row :gutter="15">
        <el-col v-for="(item, index) in columns" :key="item.prop" :span="span" v-show="index <= collapsedIndex || (index >= collapsedIndex && !collapsed)">
          <el-form-item>
            <template #label>
              {{ item.label }}
              <span class="label-colon">:</span>
            </template>
            <SearchFormItem :pColumn="item" :pSearchParam="searchParam" />
          </el-form-item>
        </el-col>
        <el-col :span="btnSpan">
          <div class="operation">
            <el-button type="primary" @click="search">搜 索</el-button>
            <el-button @click="reset">重 置</el-button>
            <el-button
                type="text"
                style="padding-right: 0px"
                @click="collapsed = !collapsed"
            >
              {{ collapsed ? '展开' : '收起' }}
              <i class="el-icon-arrow-down" v-if="!collapsed"></i>
              <i class="el-icon-arrow-up" v-else></i>
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'SearchForm',
  components: {
    SearchFormItem: () => import('./searchFormItem.vue')
  },
  props: {
    searchColumns: {
      type: Array,
      default: () => []
    },
    pSearchParam: {
      type: Object,
      default: () => ({})
    },
    pSearch: {
      type: Function,
      default: () => {}
    },
    btnSpan: {
      type: Number,
      default: 6
    },
    span: {
      type: Number,
      default: 6
    },
    collapsedIndex: {
      type: Number,
      default: 2
    },
    resetFun: {
      type: Function,
      default: () => {},
      required: false
    }
  },
  data() {
    return {
      collapsed: false,
      columns: this.searchColumns,
      searchParam: this.pSearchParam,
      search: this.pSearch,
      resetCallback: this.resetFun
    }
  },
  computed: {
    ...mapState(['breakPoint']),
  },
  methods: {
    reset() {
      Object.keys(this.searchParam).forEach(key => {
        this.searchParam[key] = null;
      });
      this.resetCallback && this.resetCallback();
    }
  },
}
</script>

<style lang="scss">
// form-search 表格搜索样式
.form-search {
  box-shadow: none;
  border: none;
  margin-top: 15px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;

  .el-button {
    padding: 9px 20px;
  }

  .el-form {
    padding: 15px 15px 0px;
    background: #f4f8ff;
    border-radius: 4px;
    .el-form-item {
      margin-bottom: 15px;
    }

    .el-input,
    .el-select,
    .el-date-editor--timerange,
    .el-date-editor--datetimerange,
    .el-date-editor--daterange {
      width: 100%;
    }
    // 去除时间选择器上下 padding
    .el-range-editor.el-input__wrapper {
      padding: 0 10px;
    }

    // el-select 为多选时不换行显示
    .el-select__tags {
      overflow: hidden;
      white-space: nowrap;
    }

    .el-range-input {
      font-size: 13px;
    }
  }

  .operation {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }
}
</style>